<template>
	<div class="padding">
		<span :class="activeOption == 1 ? 'active_key_word' : 'unactive_key_word'" @click="activeOption = 1">关键词查询</span>
		<span :class="activeOption == 2 ? 'active_key_word' : 'unactive_key_word'" @click="activeOption = 2">快速数据统计</span>
		<div class="option_title" v-if="activeOption == 1">关键词查询</div>
		<!-- <keyword v-if="activeOption == 1"></keyword> -->
		<NewKeywords v-if="activeOption == 1"></NewKeywords>
		<quickStatistics v-if="activeOption == 2" class="mt10"></quickStatistics>
		<!-- <el-tabs v-model="activeName" class="demo-tabs" @tab-click="onTabClick" tabPosition="left">
			<el-tab-pane v-for="(item, index) in tabs" :key="index" :label="item.label" :name="item.name">
				<component ref="crud" v-if="tabName == item.name" :is="item.component" :ifShowSearch="props.ifShowSearch"></component>
			</el-tab-pane>
		</el-tabs> -->
	</div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import keyword from './components/keyword/index.vue'
import NewKeywords from './components/NewKeywords/index.vue'
import quickStatistics from './components/quickStatistics/index.vue'

// type Props = {
// 	ifShowSearch?: any
// }
// const props = withDefaults(defineProps<Props>(), {
// 	ifShowSearch: true,
// })
let activeOption = ref(1)
// let activeName = ref('1')
// const crud = ref()
// const tabs = [
// 	{ label: '关键词查询数据明细', name: '1', component: keyword },
// 	{ label: '快速数据统计', name: '2', component: quickStatistics },
// ]
// let tabName = ref('1')
// const onTabClick = (tab) => {
// 	tabName = tab.props.name
// 	// nextTick(() => {
// 	//   crud.value.refreshChange({ dataType: tab.props.name })
// 	// })
// }


</script>

<style scoped lang="scss">
.active_key_word {
	// height: 25px;
	margin-right: 20px;
	display: inline-block;
	background-image: url('../../../assets/imgs/backIcon.png');
	background-repeat: no-repeat;
	background-position: 50% 100%;
	font-weight: 700;
	font-size: 20px;
	text-align: left;
	color: #1c1c28;
	cursor: pointer;
  
}
.unactive_key_word {
	margin-right: 20px;
	display: inline-block;
	font-weight: 700;
	font-size: 20px;
	text-align: left;
	color: #1c1c28;
	opacity: 0.5;
	cursor: pointer;
}
.option_title {
	font-weight: 700;
	font-size: 16px;
	text-align: left;
	color: #0052d9;
	margin-top: 21px;
	margin-bottom: 21px;
}
</style>
